<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>评论</title>
</head>
<style>
    #footer {
        margin-left: 50%;
        margin-bottom: 40px;
        position: absolute;

        bottom: 0;
    }

    .goods {
        outline: #00FF00 dotted thick;
        border-radius: 2em;
    }
    input[type='number'] {
        -moz-appearance: textfield !important;
    }

</style>
<script src="../../plugins/vue/vue.js"></script>
<script src="../../plugins/axios/axios.min.js"></script>
<link rel="stylesheet" href="../../plugins/element-ui/index.css">
<script src="../../plugins/element-ui/index.js"></script>

<body>
<div id="app">
    <div>
        <template>
            <div>
                <div style="margin-top: 30px;">

                    <el-button type="primary" style="margin-left: 1000px" @click="changeStatus(1)"
                               :disabled="btnUnChecked">我的评论 </el-button>
                    <el-button type="success" style="margin-left: 5px" @click="changeStatus(2)"
                               :disabled="btnPassed">回复我的</el-button>

                </div>
            </div>
        </template>
    </div>

    <el-table :data="tableData" border stripe style="margin-top:30px;width: 1105px;margin-left: 100px;">

        <el-table-column align="center" prop="goodsName" label="商品名称" width="288" :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column align="center" prop="rate" label="我的评分" width="80"></el-table-column>
        <el-table-column align="center" prop="detail" label="评论" width="300">
            <template slot-scope="scope" >
                <el-popover trigger="hover" placement="top">
                    <span>{{ scope.row.detail }}</span>
                    <div slot="reference">
                        <span style="
                            display: -webkit-box;;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                            white-space: pre-line;
                            ">
                            {{ scope.row.detail }}
                        </span>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="createTime" label="评论时间" width="140">

        </el-table-column>

        <el-table-column label="操作" width="296" align="center">
            <template slot-scope="scope">
                <el-button type="primary" @click="checkSeller(scope.row)" size="small" v-if="status == '1'" >查看商家</el-button>
                <el-button type="success" @click="evaluationDetail(scope.row)" size="small" >查看详情</el-button>
                <el-button type="danger" @click="remove(scope.row)" size="small " v-if="status == '1'">删 除 </el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="block" id="footer">
        <el-pagination @current-change="handleCurrentChange" :current-page="pagination.currentPage"
                       :page-size="pagination.pageSize" layout="total, prev, pager, next, jumper" :total="pagination.total">
        </el-pagination>
    </div>



    <el-dialog title="评论详情" :visible.sync="addressVisiable">


        <el-descriptions column="2">
            <el-descriptions-item label="评分">
                <el-tag size="small">{{evaluationInfo.rate}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="评论时间">{{evaluationInfo.createTime}}</el-descriptions-item>
            <el-descriptions-item label="评论">{{evaluationInfo.detail}}</el-descriptions-item>
        </el-descriptions>

        <el-image :src="image" alt="图片不见了"
                  style="height: 100px;width: 100px;margin-left: 10px;"
                  ref="preview"
                  :preview-src-list="evaluationInfo.images"
                  v-for="(image,j) in evaluationInfo.images">
        </el-image>
        <el-image-viewer
                v-if="showViewer"
                :on-close="closeViewer"
                :url-list="evaluationInfo.images"
        />
    </el-dialog>


</div>






</body>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                publishForm:{
                    goodsId: "",
                    logisticsName: "",
                    logisticsId:"",
                    orderId:""
                },
                evaluationInfo:{
                    images: [
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
                    ],
                },


                addressVisiable: false,
                value: "",
                location:

                    {   orderId:"1",
                        person: "王渝",
                        phone: "15213324310",
                        detailedAddress:"aaaaaaaaaaaaaaaaa",
                        all:"王渝 15213324310 aaaaaaaaaaaaaaaaa"
                    },

                value1: [],
                dialogFormVisible: false,
                buyFrom: false,
                formLabelWidth: '120px',
                btnUnChecked: false,
                btnPassed: false,
                btnUnPassed: false,
                btnUnBuyed: false,
                type: "",
                tableData: [{
                    "goodsId": "1",
                    "userId": null,
                    "goodsName": "劳力士",
                    "deposit": "50",
                    "description": null,
                    "imageId": null,
                    "startingPrice": 500,
                    "startingTime": "今天，我去红石公园玩淘气堡。那么大的淘气堡，完全是用气充起来的，摸一摸，很光滑，按一按，有弹性。我迫不及待地脱了鞋，谁知刚一迈上去就来了个“四脚朝天”。不过，没关系，浑身都不疼，用不着哭鼻子，还会哈哈",
                    "endTime": "2022-12-02 15:00:00",
                    "priceMarkup": 0,
                    "images": null,
                    "typeName": "表",
                    "status": "2",
                    "userName": "LostSouls",
                    "realName": null,
                    "phone": "15213324310",
                    "email": "2568938256@qq.com",
                    "breakCount": 0,
                    "orderId": "1"
                }],

                pagination: { //分页相关模型数据
                    currentPage: 1, //当前页码
                    pageSize: 8, //每页显示的记录数
                    total: 0, //总记录数
                },
                publishForm:{},
                status: "1",
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                pickerOptions: {
                    disabledDate(time) {
                        const date = new Date();
                        return time.getTime() < date.getTime();

                    },
                },
                currentOrder: {

                },

            };



        },

        created() {
            this.getAll();
            this.getAllAddress()

        },
        computed: {
            rules() {
                const validatelogisticsName = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请选择物流公司'))
                    } else {
                        callback()
                    }
                }
                const validatelogisticsId = (rule, value, callback) => {
                    if (value.length < 1) {
                        callback(new Error('请填写单号'))
                    }
                    else {
                        callback()
                    }
                }

                return {
                    'logisticsName': [{
                        'validator': validatelogisticsName,
                        'trigger': 'blur'
                    }],
                    'logisticsId': [{
                        'validator': validatelogisticsId,
                        'trigger': 'blur'
                    }],

                }
            },
        },


        methods: {
            checkSeller(row){
                sessionStorage.setItem("sellerUserId",row.sellerUserId)
                window.open("./seller.html")
            },
            getAllAddress() {
                axios.get("/address/getAll/" + sessionStorage.getItem("userId")).then((res) => {
                    this.location = res.data.data
                })
            },

            getAll() {
                this.btnUnChecked = false;
                this.btnUnPassed = false;
                this.btnPassed = false;
                this.btnUnBuyed = false;
                if (this.status == "1") {
                    this.btnUnChecked = true;
                }
                if (this.status == "2") {
                    this.btnPassed = true;

                }

                axios.get("/evaluation/queryPage/" + this.pagination.currentPage + "/" + this.pagination.pageSize +
                    "/" + this.status +"/" + sessionStorage.getItem("userId")).then((res) => {
                    this.tableData = res.data.data.list;
                    this.pagination.pagesize = res.data.data.pageSize;
                    this.pagination.currentPage = res.data.data.pageNum;
                    this.pagination.total = res.data.data.total;
                })

            },
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.getAll();
            },
            viewDetails(row) {
                sessionStorage.setItem("currentGoodsId",row.goodsId);
                window.parent.location.href = "./goodsDetail.html"
                // this.form = row;

                // this.dialogFormVisible= true;
                // this.$alert("点击" + this.dialogFormVisible)
            },
            changeStatus(status) {
                this.status = status;
                this.pagination.currentPage = 1;
                this.getAll();
            },
            buy(row){
                this.buyFrom = true;
                this.publishForm.orderId = row.orderId
            },
            doBuy(){

                if(this.value == ""){
                    this.$message.info("请先选择地址")
                }else{
                    this.currentOrder.buyerAddressId = this.value;
                    this.$confirm("确认支付吗？","提示",{type:"info"}).then(()=>{
                        axios.post("/order/pay",this.currentOrder).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else {
                                this.$message.success(res.data.data)
                            }
                            this.depositRule = false;
                        })
                    }).catch(()=>{
                        //this.$message.info("取消");
                    })

                }
            },
            seeAddress(row){
                axios.get("/address/getOne/" + row.buyerAddressId).then((res) =>{
                    this.location = res.data.data;
                    this.addressVisiable = true;
                })
            },
            evaluationDetail(row){
                axios.get("/evaluation/detail/" + row.evaluationId).then((res) => {
                    this.evaluationInfo = res.data.data;
                    this.addressVisiable = true;
                })
            },
            remove(row){

                this.$confirm("确认删除吗？","提示",{type:"info"}).then(()=>{
                    axios.get("/evaluation/remove/" + row.evaluationId).then((res) => {
                        if(res.data.code == 0){
                            this.$message.error(res.data.msg)
                        }else {
                            this.$message.success(res.data.data)
                        }
                    })
                }).catch(()=>{
                    //this.$message.info("取消");
                })
            },
            submitForm() {
                //this.$message.info(this.publishForm.logisticsName)
                console.log(this.publishForm.logisticsName == undefined)
                console.log(this.publishForm.logisticsName)
                if(this.publishForm.logisticsName == undefined || this.publishForm.logisticsName == ""){
                    this.$message.error("请选择物流")
                }else if(this.publishForm.logisticsId == undefined ||this.publishForm.logisticsId == ""){
                    this.$message.error("请填写单号")
                }else{
                    for(var i = 0 ;i < this.logistics_names.length; i++){
                        if(this.logistics_names[i].name == this.publishForm.logisticsName){
                            var reg = this.logistics_names[i].reg_mail_no
                            break;
                        }
                    }
                    console.log("reg =" + reg)
                    var a = this.publishForm.logisticsId;
                    var result = a.match(reg)
                    if(result != null){
                        axios.post("/logistics/dispatch",this.publishForm).then((res) => {
                            if(res.data.code == 0){
                                this.$message.error(res.data.msg)
                            }else {
                                this.$message.success(res.data.data)
                            }
                            this.getAll();
                            this.publishForm ={
                                goodsId: "",
                                logisticsName: "",
                                logisticsId:"",
                                orderId:""
                            }
                            this.buyFrom = false;
                        })
                    }else{
                        this.$message.error("快递单号格式不正确")
                    }

                }

            },
        },



    })
</script>

</html>